<template>
	<div class="wrap relative">
		<canvas class="fixed" id="particle" width="1575" height="1337"></canvas>

		<h1 class="title">{{ title }}</h1>

		<div class="login">
			<div class="login-box">
				<div class="login-title">登录</div>
				<Form :model="loginRef" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
					<Alert
						class="mb-4"
						:closable="true"
						v-if="errMsg"
						:message="errMsg"
						type="error"
						@close="onClose"
					/>
					<FormItem label="用户名" v-bind="validateInfos.username">
						<Input v-model:value="loginRef.username"></Input>
					</FormItem>
					<FormItem label="密码" v-bind="validateInfos.password">
						<Input type="password" v-model:value="loginRef.password"></Input>
					</FormItem>
				</Form>
				<a-button type="primary" size="large" @click="submit">登录</a-button>
			</div>
		</div>
	</div>
</template>
<script lang="ts">
import { defineComponent, reactive, ref } from 'vue';
import { Form, Alert, FormItem, Input } from 'ant-design-vue';
import { useUserStore } from '@/store/modules/user';
import { useGlobSetting } from '@/hooks/setting';
import { AesEncryption } from '@/utils/cache/cipher';
import { loginCipher } from '@/settings/encryptionSetting';

const useForm = Form.useForm;

export default defineComponent({
	name: 'Login',
	components: { Alert, Form, FormItem, Input },
	setup() {
		const userStore = useUserStore();
		const title = ref(useGlobSetting().title);

		const loginRef = reactive({
			username: '',
			password: '',
		});
		const rules = reactive({
			username: [
				{
					required: true,
					message: '请输入用户名',
				},
			],
			password: [
				{
					required: true,
					message: '请输入密码',
				},
			],
		});
		const errMsg = ref('');

		const { validate, validateInfos } = useForm(loginRef, rules);

		const submit = () => {
			validate().then(data => {
				data.password = new AesEncryption({ key: loginCipher.key }).encryptByAES(data.password);
				userStore.login({ ...data, mode: 'none' }).then(
					() => {},
					err => {
						errMsg.value = err || err.message;
					},
				);
			});
			// .catch(err => {
			// });
		};

		const onClose = () => {
			errMsg.value = '';
		};

		return {
			title,
			loginRef,
			validateInfos,
			errMsg,
			submit,
			onClose,
		};
	},
});
</script>
<style lang="less" scoped>
.wrap {
	width: 100%;
	height: 100%;
	background: url('@/assets/images/login_bg.jpg') no-repeat center center;
	background-size: cover;
	// background-image: linear-gradient(to bottom, #02164f, #000);
}
.title {
	color: #fff;
	font-size: 28px;
	letter-spacing: 2px;
	padding: 35px 70px;
}

.login {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate3d(-50%, -50%, 0);
	z-index: 1;
	box-shadow: 10px 10px 31px -5px rgba(0, 0, 0, 0.7);
	background: rgba(255, 255, 255, 0.4);
	padding: 6px;
	border-radius: 6px;
	width: 410px;
	height: 400px;
}
.login-box {
	background: #fff;
	height: 100%;
	border-radius: 6px;
	padding: 10px;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center;
}
.login-title {
	font-size: 22px;
	font-weight: bold;
	text-align: center;
}
</style>
